/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* model */
import { SettingGPTChannelEnum, SettingGPTRobotChannelList, SettingGPTRobotModelModules } from "@gpt/model";
/* vue */
import { defineComponent, PropType } from "vue";
/* types */
import { SettingGPTRobotChannelType, SettingGPTRobotModuleType } from "@gpt/types";
import { isFalsy } from "@src/util/type";
import { getRootWindow } from "pub-bbx-utils";

enum SettingGPTEditViewChannelGroupEventEnum {
  Input = 'input',
}

export default defineComponent({
  name: ComponentNameEnum.SettingGPTEditViewChannelGroup,
  props: {
    value: {
      type: Number as PropType<number>
    },
    disabled: {
      type: Boolean,
      default: false
    },
    onInput: {
      type: Function
    }
  },
  setup(props, { emit }) {
    
  },
  data() {
    return {
      channel: SettingGPTRobotChannelList,
      isIMOpen: false
    }
  },
  computed: {
    imAuth(): boolean {
      return this.isIMOpen
    },
    channelList(): SettingGPTRobotChannelType[] {
      return this.channel.filter(item => {
        if (item.value === SettingGPTChannelEnum.IM) {
          return this.imAuth
        }
        return true
      })
    }
  },
  watch: {
    
  },
  mounted() {
    this.isIMOpen = localStorage.getItem('im_isOpen') == '1'
  },
  methods: {
    onInputHandler(value: string) {
      this.$emit(SettingGPTEditViewChannelGroupEventEnum.Input, value)
    },
    renderRadioItem(item: SettingGPTRobotChannelType) {
      return (
        <span>
          {item.name}
        </span>
      )
    }
  },
  render() {
    return (
      <div class={ComponentNameEnum.SettingGPTEditViewChannelGroup}>
        <el-radio-group
          disabled={this.disabled}
          value={this.value}
          onInput={this.onInputHandler}
        >
          {this.channelList.map(item => {
            return (
              <el-tooltip
                placement="top"
                content={item.tooltip}
              >
                <el-radio
                  border
                  label={item.value}
                  key={item.value}
                >
                  {this.renderRadioItem(item)}
                </el-radio>
              </el-tooltip>
            )
          })}
        </el-radio-group>
      </div>
    )
  }
});